<template>
  <div>
  是不是这里{{groupid}}
    <el-form ref="form" :model="query" label-width="80px" :inline="true">
      <el-form-item label="在线状态">
        <el-select v-model="query.online" placeholder="">
          <el-option key="-1" value="-1" label="全部"></el-option>
          <el-option key="1" value="1" label="在线"></el-option>
          <el-option key="0" value="0" label="离线"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="审核状态">
        <el-select v-model="query.status" placeholder="审核状态">
          <el-option key="-1" value="" label="全部"></el-option>
          <el-option key="0" value="0" label="待审"></el-option>
          <el-option key="1" value="1" label="通过"></el-option>
          <el-option key="2" value="2" label="拒绝"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="关键字">
        <el-input v-model="query.kw" placeholder="设备号/设备id"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch()">查询</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="dataList">
      <el-table-column label="编号" prop="id"></el-table-column>
      <el-table-column label="设备名" prop="title"></el-table-column>
      <el-table-column label="设备ID" prop="deviceid"></el-table-column>
      <el-table-column label="项目名称" prop="username"></el-table-column>
      <el-table-column label="设备地点" prop="address"></el-table-column>
      <el-table-column label="在线" prop="is_online">
        <template slot-scope="scope">
          {{ scope.row.is_online == 1 ? '在线' : '离线' }}
        </template>
      </el-table-column>
      <el-table-column label="操作" >
        <template slot-scope="scope">
          <el-button type="primary" @click="addDevice(scope.row)">添加到组</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        :total="total"
        :current-page="query.page"
        :page-size="10"
        @current-change="changePage"
      ></el-pagination>
  </div>
</template>

<script>
import { page } from '@/api/equipment/index.js';
import {addDevice} from '@/api/equipment/group.js';
export default {
  props:['groupid'],  
  data() {
    return {
      form: {},
      query: {
        page: 1,
        online: '-1',
        status: '',
        kw: '',
      },
      total: 0,
      dataList: [],
    };
  },
  created(){
    this.getData()
  },
  methods: {
    getData() {
      page(this.query).then((res) => {
        console.log(res, 'devices');
        this.dataList = res.data.list.data;
        this.total = res.data.list.total;       
      });
    },
    changePage(e) {
      this.query.page = e;
      this.getData();
    },
    onSearch(){
      this.query.page = 1;
      this.getData();
    },
    addDevice(row){
      addDevice({
        group_id:this.groupid,
        device_id:row.id
      }).then(res=>{
        this.$message.success('添加成功')
        this.$emit("success")
      })
    }
  },
};
</script>

<style scoped></style>
